<template>
  <a-card>
    <div class="content">
      <a-form-model :model="form" layout="inline">
        <a-form-model-item>
          <a-select
            style="width: 160px"
            placeholder="请选择通道类型"
            allow-clear
            :loading="form_loading"
            v-model="form.search.type"
            :options="channel_type"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-select
            style="width: 160px"
            placeholder="请选状态"
            allow-clear
            v-model="form.search.status"
            :options="[
              { key: 1, title: '正常', value: 1 },
              { key: 0, title: '禁用', value: 0 }
            ]"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="search"> 查询 </a-button>
          <a-button type="primary" style="margin-left: 20px; background-color: #909399; border: 0" @click="resetSearch">
            重置
          </a-button>
          <a-button type="primary" @click="openPopup(0)" style="margin-left: 20px"> 新增编码 </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table
      :columns="channel_columns"
      rowKey="id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      size="small"
      class="channel-table"
      :data-source="channel_list"
      :loading="channel_loading"
      :pagination="{
        current: this.form.page,
        pageSize: this.form.page_size,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: total
      }"
      @change="tableChange"
    >
      <template slot="type" slot-scope="type_name, channel">
        <a-tag color="blue" v-if="channel.type == 1">{{ type_name }}</a-tag>
        <a-tag color="orange" v-else-if="channel.type == 2">{{ type_name }}</a-tag>
        <a-tag color="red" v-else-if="channel.type == 3">{{ type_name }}</a-tag>
        <a-tag v-else>{{ type_name }}</a-tag>
      </template>
      <template slot="status" slot-scope="val">
        <a-tag :color="val ? 'blue' : 'orange'">{{ val ? '正常' : '禁用' }}</a-tag>
      </template>
      <template slot="operations" slot-scope="row">
        <a-space :size="0" align="center">
          <a-button type="link" size="small" @click="openPopup(1, row)"> 编辑</a-button>
          <a-divider type="vertical" />
          <a-button type="link" size="small" @click="delChannels(row)"> 禁用</a-button>
        </a-space>
      </template>
    </a-table>
    <a-modal
      :bodyStyle="{ width: '90%', marginLeft: '25%' }"
      width="50%"
      :title="popupTitle"
      v-model="visibleModal"
      @ok="handleOk"
    >
      <a-form-model
        :model="formPopup"
        ref="ruleForm"
        labelAlign="right"
        :rules="refFromrules"
        :labelCol="{ span: 3 }"
        layout="vertical"
        :wrapperCol="{ span: 10 }"
      >
        <a-form-model-item label="四方平台:">
          <a-input disabled v-model="formPopup.platform_name" />
        </a-form-model-item>
        <a-form-model-item label="通道名称:" prop="name">
          <a-input v-model="formPopup.name" required />
        </a-form-model-item>
        <a-form-model-item label="通道类型:">
          <a-select v-model="formPopup.type_name" size="default" :options="channel_type"></a-select>
        </a-form-model-item>
        <a-form-model-item label="通道编码:" prop="third_code">
          <a-input v-model="formPopup.third_code" required />
        </a-form-model-item>
        <a-form-model-item label="单笔限额:">
          <a-input v-model="formPopup.times_max_amount" />
        </a-form-model-item>
        <a-form-model-item label="单日限额:">
          <a-input v-model="formPopup.day_max_amount" />
        </a-form-model-item>
        <a-form-model-item label="交易时间:">
          <a-time-picker v-model="startTime" valueFormat="HH:mm" format="HH:mm" />-
          <a-time-picker v-model="endTime" valueFormat="HH:mm" format="HH:mm" />
        </a-form-model-item>
        <a-form-model-item label="提示消息:">
          <a-input v-model="formPopup.tip" />
        </a-form-model-item>
        <a-form-model-item label="状态:" prop="status">
          <a-radio-group v-model="formPopup.status">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>
<script>
import { channelDict, channelList, addChannel, editChannel, delChannel } from '@/api/channel'
export default {
  data() {
    return {
      selectedRowKeys: [],
      i: null,
      startTime: '',
      endTime: '',
      //弹窗表单
      formPopup: {
        platform_name: '新四方',
        name: null,
        type_name: null,
        third_code: null,
        times_max_amount: null,
        day_max_amount: null,
        available_time: null,
        tip: null,
        status: null
      },
      //弹窗标题
      popupTitle: '新增编码',
      //弹窗显示
      visibleModal: false,
      form_loading: false,
      form: { page: 1, page_size: 50, search: { type: 1, status: 1 }, order_by: 'weight', order: 'desc' },
      channel_type: [],
      channel_columns: [
        {
          align: 'center',
          dataIndex: 'id',
          title: '编号'
        },
        {
          align: 'center',
          dataIndex: 'weight',
          title: '排序'
        },
        {
          align: 'center',
          dataIndex: 'platform_name',
          title: '四方平台'
        },
        {
          align: 'center',
          dataIndex: 'name',
          title: '通道名称'
        },
        {
          align: 'center',
          dataIndex: 'third_code',
          title: '通道编码'
        },
        {
          align: 'center',
          dataIndex: 'available_time',
          title: '交易时间'
        },
        {
          align: 'center',
          dataIndex: 'type_name',
          title: '通道类型',
          scopedSlots: { customRender: 'type' }
        },
        {
          align: 'center',
          dataIndex: 'times_max_amount',
          title: '单笔限额'
        },
        {
          align: 'center',
          dataIndex: 'day_max_amount',
          title: '单日限额'
        },
        {
          align: 'center',
          dataIndex: 'status',
          title: '状态',
          scopedSlots: { customRender: 'status' }
        },
        {
          align: 'center',
          dataIndex: 'tip',
          title: '提示消息'
        },
        {
          align: 'center',
          key: 'operations',
          title: '操作',
          scopedSlots: { customRender: 'operations' }
        }
      ],
      channel_list: [],
      channel_loading: false,
      total: 0,
      refFromrules: {
        name: [{ required: true, message: '请输入通道名称', trigger: 'blur' }],
        third_code: [{ required: true, message: '请输入通道编码', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    //禁用
    delChannels(row) {
      var that = this
      this.$confirm({
        title: '确定删除吗？',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk() {
          delChannel({ ids: [row.id] }).then(res => {
            this.$message.success('操作成功')
          })
        },
        onCancel() {
          that.$message.success('已取消操作')
        },
        class: 'test'
      })
    },
    //重置
    resetPupForm() {
      this.startTime = null
      this.endTime = null
      this.formPopup = {
        ids: '',
        platform_name: '新四方',
        name: null,
        type_name: null,
        third_code: null,
        times_max_amount: null,
        day_max_amount: null,
        available_time: null,
        tip: null,
        status: null
      }
    },
    //弹窗确定按钮
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.i == 0) {
            this.formPopup.available_time = this.startTime + '-' + this.endTime
            addChannel(this.formPopup).then(res => {
              this.getChannelDict()
              this.visibleModal = false
              this.$message.success('操作成功')
            })
          } else {
            this.formPopup.available_time = this.startTime + '-' + this.endTime
            editChannel(this.formPopup).then(res => {
              this.getChannelDict()
              this.visibleModal = false
              this.$message.success('操作成功')
            })
          }
        } else {
          return false
        }
      })
    },
    //打开弹窗
    openPopup(i, row) {
      this.resetPupForm()
      this.i = i
      if (i == 0) {
        this.popupTitle = '新增编码'
        this.visibleModal = true
      } else {
        this.popupTitle = '修改编码'
        this.visibleModal = true
        this.formPopup = JSON.parse(JSON.stringify(row))
        this.formPopup.ids = JSON.parse(JSON.stringify(row)).id
        this.startTime = this.formPopup.available_time.split('-')[0]
        this.endTime = this.formPopup.available_time.split('-')[1]
      }
    },
    async getChannelDict() {
      this.form_loading = true
      try {
        const dict = await channelDict()
        this.channel_type = dict.data.type.map(v => {
          return { key: v.id, title: v.name, value: v.id }
        })
        this.$set(this.form.search, 'type', dict.data.type[0].id)
        this.getChannelList()
      } catch (e) {
        //
      }
      this.form_loading = false
    },
    async getChannelList() {
      this.channel_loading = true
      try {
        const list = await channelList(this.form)
        this.channel_list = list.data.list
        this.total = list.data.total
      } catch (e) {
        //
      }
      this.channel_loading = false
    },
    search() {
      this.$set(this.form, 'page', 1)
      this.getChannelList()
    },
    resetSearch() {
      this.form = { page: 1, page_size: 50, search: { type: 1, status: 1 }, order_by: 'weight', order: 'desc' }
      this.$forceUpdate()
      this.getChannelList()
    },
    tableChange(pagination) {
      this.$set(this.form, 'page_size', pagination.pageSize)
      this.$set(this.form, 'page', pagination.current)
      this.getChannelList()
    }
  },
  mounted() {
    this.getChannelDict()
  }
}
</script>
<style lang="less" scoped>
.channel-table {
  margin-top: 20px;
}
</style>
